<!DOCTYPE html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
    <script>
    window.WCT = {
      // don't wait for HTML Imports to load
      waitFor: function(cb) {
        cb();
      }
    };
    </script>
    <script src="../../../web-component-tester/browser.js"></script>
    <link rel="import" href="../../polymer.html">
    <script>
    Polymer({
      is: 'attach-detach',
      properties: {
        stream: {
          type: Array,
          value: function(){ return []; }
        }
      },
      attached: function() {
        this.stream.push('attached');
      },
      detached: function() {
        this.stream.push('detached');
      }
    });
    </script>
    <script>
      function checkOrder(el) {
        assert.equal(el.stream.join(' '), [
          'attached',
          'detached'
        ].join(' '));
      }
    </script>
  </head>
  <body>
    <attach-detach id="ad"></attach-detach>
    <script>
    suite('attached-detached timing', function() {

      var ad = document.getElementById('ad');
      ad.remove();
      var el = document.createElement('attach-detach');
      document.body.appendChild(el);
      el.remove();
      
      test('attach() and detach() are correct for upgraded elements', function(done) {
        Polymer.RenderStatus.whenReady(function() {
          checkOrder(ad);
          done();
        });
      });
      test('attach() and detach() are correct for imperative elements', function(done) {
        Polymer.RenderStatus.whenReady(function() {
          checkOrder(el);
          done();
        });
      });
      test('attach() and detach() are correct for elements made after load', function(done) {
        Polymer.RenderStatus.whenReady(function() {
          var e = document.createElement('attach-detach');
          document.body.appendChild(e);
          e.remove();
          checkOrder(e);
          done();
        });
      });
    });
    </script>
  </body>
</html>
